<template>
  <el-table
    :data="tableData"
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    border
  >
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="code" label="权限值" />
    <el-table-column prop="updateTime" label="修改时间" />
    <el-table-column label="操作" width="320px" align="center">
      <template #="{ row }">
        <el-button
          type="primary"
          icon="Plus"
          @click="addMenu(row)"
          :disabled="row.level == 4"
        >
          {{ row.level == 3 ? '添加功能' : '添加菜单' }}
        </el-button>
        <el-button
          type="primary"
          icon="Edit"
          @click="editMenu(row)"
          :disabled="row.level == 1"
        >
          编辑
        </el-button>
        <el-button
          type="primary"
          icon="Delete"
          @click="deleteMenu(row.id)"
          :disabled="row.level == 1"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 添加和编辑 -->
  <el-dialog v-model="dialogFormVisible" :title="menuData.id ? '编辑' : '添加'">
    <el-form :model="menuData" label-width="100px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="menuData.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="权限值" prop="name">
        <el-input v-model="menuData.code" placeholder="请输入权限值" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import {
  reqAllPermission,
  reqAddOrUpdateMenu,
  reqRemoveMenu,
} from '@/api/acl/menu'
import type {
  PermissionResponseData,
  PermissionList,
  Permission,
  MenuParams,
} from '@/api/acl/menu/type'
import { ElMessage } from 'element-plus'
const tableData = ref<PermissionList>([])
const dialogFormVisible = ref<boolean>(false)
const menuData = reactive<MenuParams>({
  code: '',
  level: 0,
  name: '',
  pid: 0,
})
// 获取列表
const getDataList = async () => {
  const res: PermissionResponseData = await reqAllPermission()
  if (res.code == 200) {
    tableData.value = res.data
  }
}
getDataList()

// 添加菜单
const addMenu = (row: Permission) => {
  dialogFormVisible.value = true
  Object.assign(menuData, {
    code: '',
    level: 0,
    name: '',
    pid: 0,
  })
  menuData.level = row.level + 1
  menuData.pid = row.id as number
}
// 编辑
const editMenu = (row: Permission) => {
  dialogFormVisible.value = true
  Object.assign(menuData, row)
}
// 确定按钮
const save = async () => {
  const res = await reqAddOrUpdateMenu(menuData)
  if (res.code == 200) {
    ElMessage({
      type: 'success',
      message: menuData.id ? '编辑成功' : '新增成功',
    })
    dialogFormVisible.value = false
    getDataList()
  }
}
// 删除
const deleteMenu = async (id: number) => {
  const res = await reqRemoveMenu(id)
  if (res.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
    getDataList()
  }
}
</script>
<style scoped lang="scss"></style>
